@import '~tracim_frontend_lib/src/css/Variable.styl'

cardWidth = 280px

.kanban
  &__contentpage__wrapper__board__card
    width cardWidth
    background-color offWhite
    border 1px solid
    border-radius standardBorderRadius
    padding standardSpacing
    text-align start
    margin-bottom standardSpacing
    &.buttonHidden
      .kanban_addCard, .dropdown
        display none
    &:active
      opacity 70%
    &__title
      display flex

      & strong
        flex 1
        overflow-wrap anywhere
        hyphens auto
        margin-bottom textSpacing
        unicode-bidi plaintext

      & > button
        font-size metadataFontSize
        padding textSpacing
        border none
        border-radius 0
        display flex

        &.iconbutton__icon
          margin 0

      &__actions.dropdownMenuButton
        color fontColor
        padding 0
        &::after
          display none

    &__options
      font-weight bold
      font-size metadataFontSize

      &__deadline
          display inline
          & i
            margin-inline-end textSpacing

      &__freeInput
        unicode-bidi plaintext

    &__description
      overflow-wrap break-word
      display flex
      flex-direction column
      & > div
        line-height standardFontSize
        img
          object-fit contain
          max-width 100%
          display block // INFO - RJ - 2021-01-19 - without this, the card wrapper from react-kanban is weirdly sized
        & > p
          unicode-bidi plaintext

      &.kanban__contentpage__wrapper__board__card__description__overflow > div
        max-height (3 * standardFontSize)
        overflow hidden
      &__overflow__button
        align-self flex-end
        font-size metadataFontSize
        font-weight bold
        margin-top textSpacing
        color darkGrey1
